<div
  [formGroup]="form"
  class="p-field p-grid"
  [class]="{ 'p-ai-start': formItem.controlType == 'textArea' }"
>
  <label
    [attr.for]="formItem.key"
    class="p-col-12 p-mb-3 p-md-3 p-mb-md-0"
    [class]="{ required: formItem.required }"
    >{{ formItem.label }}</label
  >

  <div [ngSwitch]="formItem.controlType" class="p-col-12 p-md-9">
    <p-inputNumber
      *ngSwitchCase="'inputNumber'"
      [formControlName]="formItem.key"
      [id]="formItem.key"
      currency="CNY"
      locale="cn-ZH"
      mode="decimal"
      [minFractionDigits]="0"
    ></p-inputNumber>
    <input
      pInputText
      *ngSwitchCase="'textbox'"
      [formControlName]="formItem.key"
      [id]="formItem.key"
      [type]="formItem.type"
    />
    <div
      *ngSwitchCase="'radio'"
      class="radio-group"
    >
      <ng-container *ngFor="let item of formItem.options">
        <!-- <p-radioButton
          [name]="formItem.key"
          [value]="item.value"
          [formControlName]="formItem.key"

          [inputId]="item.label"
        ></p-radioButton> -->
        <input
          type="radio"
          [name]="formItem.key"
          [id]="item.label"
          [formControlName]="formItem.key"
          [value]="item.value"
        />

        <label [for]="item.label">{{ item.label }}</label>

        <!-- <p-selectButton [options]=" formItem.options"      [formControlName]="formItem.key">
          <ng-template let-item>
             {{item.label}}
          </ng-template>
      </p-selectButton> -->
      </ng-container>
    </div>

    <!-- <p-radioButton  name="groupname" value="val1" [ [formControlName]="formItem.key"> -->

    <p-dropdown
      [inputId]="formItem.key"
      *ngSwitchCase="'dropdown'"
      [options]="formItem.options"
      [showClear]="true"
      [formControlName]="formItem.key"
    ></p-dropdown>

    <textarea
      [rows]="5"
      [cols]="30"
      *ngSwitchCase="'textArea'"
      [id]="formItem.key"
      [formControlName]="formItem.key"
      pInputTextarea
      autoResize="autoResize"
    ></textarea>
    <p-multiSelect
      [showHeader]="false"
      [selectedItemsLabel]="'选择了{0}项'"
      [maxSelectedLabels]="4"
      [filter]="false"
      [inputId]="formItem.key"
      *ngSwitchCase="'multiSelect'"
      [options]="formItem.options"
      [formControlName]="formItem.key"
    ></p-multiSelect>
    <p-calendar
      view="date"
      [showTime]="false"
      dataType="string"
      showSeconds
      [showWeek]="false"
      showButtonBar="true"
      yearRange="1900:2100"
      [monthNavigator]="true"
      [yearNavigator]="true"
      [locale]="cn"
      dateFormat="yy-mm-dd"
      [inputId]="formItem.key"
      *ngSwitchCase="'calendar'"
      [formControlName]="formItem.key"
    ></p-calendar>

    <!-- <select [id]="formItem.key" *ngSwitchCase="'dropdown'" [formControlName]="formItem.key">
      <option *ngFor="let opt of formItem.options" [value]="opt.key">{{opt.value}}</option>
    </select> -->
  </div>

  <div
    class="errorMessage p-offset-3 p-col-12 p-md-10"
    *ngIf="name.invalid && (name.dirty || name.touched)"
  >
    {{ formItem.label }}必填
  </div>
</div>
